<template>
    <div>
        <div class="title">生成计划</div>
        <div class="content">
            <el-form ref="form"
                     :disabled="seeFlag"
                     :model="form"
                     size="small"
                     inline
                     label-width="135px"
                     label-position="auto"
                     label-suffix="："
                     :rules="rules">

                <el-form-item label="作业码头"
                              prop="termCode">
                    <el-select clearable style="width: 150px" size="small"
                               v-model="form.termCode" placeholder="请选择作业码头" :disabled="termDis">
                        <el-option :label="item.cnName" :value="item.termCode" v-for="item,index in termList"
                                   :key="index"></el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="计划类型"
                              prop="planTag">
                    <el-select v-model="form.planTag"
                               placeholder="请选择"
                               clearable
                               filterable
                               style="width:150px">
                        <el-option :label="item.meaning"
                                   :value="item.lowValue"
                                   v-for="item,index in dataList.INTERNALFG_IM"
                                   :key="index"></el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="查验单位"
                              prop="inspectionOrg">
                    <el-select v-model="form.inspectionOrg"
                               placeholder="请选择"
                               clearable
                               filterable
                               style="width:150px">
                        <el-option :label="item.meaning"
                                   :value="item.lowValue"
                                   v-for="item,index in dataList.INTERNALFG_IM"
                                   :key="index"></el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="查验项目"
                              prop="inspectionItem">
                    <el-select v-model="form.inspectionItem"
                               placeholder="请选择"
                               clearable
                               filterable
                               style="width:150px">
                        <el-option :label="item.meaning"
                                   :value="item.lowValue"
                                   v-for="item,index in dataList.INTERNALFG_IM"
                                   :key="index"></el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="落场类型"
                              prop="landingType">
                    <el-select v-model="form.landingType"
                               placeholder="请选择"
                               clearable
                               filterable
                               style="width:150px">
                        <el-option :label="item.meaning"
                                   :value="item.lowValue"
                                   v-for="item,index in dataList.INTERNALFG_IM"
                                   :key="index"></el-option>
                    </el-select>
                </el-form-item>



                <el-form-item label="申请人"
                              prop="cstCoperName">
                    <el-input v-model="form.createUser"
                              placeholder=""
                              clearable
                              disabled
                              style="width:150px"></el-input>
                </el-form-item>
                <el-form-item label="开始时间"
                              prop="opsttm">
                    <el-date-picker type="datetime"
                                    @change="setVal"
                                    placeholder="选择日期"
                                    clearable
                                    value-format="yyyy-MM-dd HH:mm:ss"
                                    v-model="form.opsttm"
                                    style="width:150px"></el-date-picker>
                </el-form-item>
                <el-form-item label="结束时间"
                              prop="opedtm">
                    <el-date-picker type="datetime"
                                    placeholder="选择日期"
                                    disabled
                                    clearable
                                    value-format="yyyy-MM-dd HH:mm:ss"
                                    v-model="form.opedtm"
                                    style="width:150px"></el-date-picker>
                </el-form-item>


                <el-form-item label="车队单位"
                              prop="cstTrnscomCd">
                    <el-select v-model="form.cstTrnscomCd"
                               placeholder="请选择"
                               clearable
                               filterable
                               style="width:150px">
                        <el-option v-for="item in dataList.cstTrnscomCd"
                                   :key="item.customerCode"
                                   :label="item.name"
                                   :value="item.customerCode"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="备注"
                              prop=""
                              style="display:block">
                    <el-input type="textarea"
                              placeholder="请输入查验备注"
                              clearable
                              v-model="form.remark"
                              style="width:710px"></el-input>
                </el-form-item>
            </el-form>
            <div class="btn">
                <el-upload
                        action="#"
                        :show-file-list="false"
                        :before-upload="batchImport"
                >
                    <el-button icon="el-icon-upload2" class="add" slot="trigger" type="primary">箱货导入</el-button>
                    <el-button type="primary"
                               class="add"
                               icon="el-icon-plus"
                               @click="add" v-if="!seeFlag">新增箱
                    </el-button>
                    <el-button type="primary"
                               class="add"
                               icon="el-icon-download"
                               @click="downLoadHeavyBox" v-if="!seeFlag">模板下载
                    </el-button>
                </el-upload>
            </div>
        </div>
    </div>
</template>

<script>

import moment from 'moment'
import {downloadExcelTemplate} from '@/util/CommUtil'

export default {
    name: 'addPlan',
    props: {
        showUpload: {
            default: true,
        },
        seeFlag: {
            default: false
        },
        planTag: {
            default: null,
        },
        termDis: {
            default: true,
        }
    },
    data() {
        return {
            palnTagList: [
                {key: 'PFRF', value: '提重返重'},
                {key: 'PFRE', value: '提重返空'},
                {key: 'PERF_WC', value: '提空返重（指定箱号）'},
                {key: 'PERF_NC', value: '提空返重（不指定箱号）'},
                {key: 'PE_WC', value: '提空箱（指定箱号）'},
                {key: 'PE_NC', value: '提空箱（不指定箱号）'},
                {key: 'PF', value: '提重箱'},
                {key: 'IF', value: '进重箱'},
                {key: 'IE', value: '进空箱'},
                {key: 'BOX', value: '装箱'},
                {key: 'UNBOX', value: '拆箱'},
            ],
            termList: [],
            form1: {},
            form: {
                payMode: 'ZD'
            },
            oriForm: {
                payMode: 'ZD'
            },
            rules: {
                tradeFlag: [
                    {required: true, message: '请选择贸易类型', trigger: 'change'},
                ],
                voyId: [
                    {required: true, message: '请选择出口船名航次', trigger: 'change'},
                ],
                termCode: [
                    {required: true, message: '请选择作业码头', trigger: 'blur'},
                ],
                workZone: [
                    {required: true, message: '请选择码头作业区', trigger: 'change'},
                ],
                opsttm: [
                    {required: true, message: '请选择开始时间', trigger: 'change'},
                ],
                opedtm: [
                    {required: true, message: '请选择结束时间', trigger: 'blur'},
                ],
                payMode: [
                    {required: true, message: '请选择结算方式', trigger: 'change'},
                ],
                payer: [
                    {required: true, message: '请选择付款单位', trigger: 'change'},
                ],
                cstTrnscomCd: [
                    {required: true, message: '请选择车队单位', trigger: 'change'},
                ],
                planAttachmentList: [
                    {required: false, message: '请选择附件', trigger: 'change'},
                ],
            },
            dataList: {},
            shipNo: [],
        }
    },
    watch: {
        form() {
            if (this.form.termCode != '') {
                this.set()
                this.getWork()
            }
            if (this.form.id) {
                this.voyId(this.form.voyId)
            }
        },
        planTag: {
            immediate: true,
            handler: function () {
                let that = this
                this.$nextTick(() => {
                    that.palnTagList.forEach((item) => {
                        if (that.planTag === item.key) {
                            that.form.planTag = item.key
                            that.form.planTagName = item.value
                            if (['提空返重（不指定箱号）', '提空返重（指定箱号）', '进空箱', '进重箱', '提空箱（不指定箱号）', '装箱（不指定箱号）'].includes(that.form.planTagName)) {
                                this.form.opedtm = '9998-12-31 23:59:59'
                                this.$forceUpdate()
                            }
                        }
                    })
                    this.oriForm = JSON.parse(JSON.stringify(this.form))
                })
            }
        },
    },
    methods: {
        downLoadHeavyBox() {
            downloadExcelTemplate('heavyBoxTemplate.xls')
        },
        batchImport(file) {
            this.$emit('batchImport', file)
        },
        setVal() {
            if ('' !== this.form.opsttm) {
                if (['提重返空', '提重', '提空箱（指定箱号）', '拆箱', '装箱（指定箱号）'].includes((this.form.planTagName))) {
                    this.form.opedtm = moment(this.form.opsttm).add(7, 'days').subtract(1, 'seconds').format('YYYY-MM-DD HH:mm:ss')
                    this.$forceUpdate()
                }
            }
        },
        voyId(id) {
            this.shipNo.forEach(item => {
                if (id === item.id) {
                    this.form.voyName1 = item.vslName + '/' + item.voyage + '/' + (item.iefg === 'I' ? '进口' : '出口')
                }
            })
        },
        voyName(id) {
            this.shipNo.forEach(res => {
                if (id === res.id) {
                    this.form.voyName = res.vslName
                }
            })
        },
        re() {
            this.$forceUpdate()
        },
        openDialog() {
            this.dialogVisible = true
        },
        add() {
            this.$emit('add')
        },
        set() {
            this.$forceUpdate()
        },
        getDate() {
            this.$emit('add')
        },
        getFile(res) {
            this.$set(this.form, 'planAttachmentList', res)
        },
        getWork() {
            this.$api
                .opaAreaCode({
                    termCode: this.form.termCode,
                })
                .then((res) => {
                    this.dataList.workZone = res.data.data
                    this.$forceUpdate()
                })
                .catch()
        },
        remoteMethod(val = '') {
            let params = {
                termCode: '',//码头编码
                schedulesType: (this.$route.name == 'emptyBox' || this.$route.name == 'heavyBox') ? 'CONTAINER' : '',//件散货BULK_CARGO，集装箱CONTAINER

                iefg: (this.$route.name == 'emptyBox' || this.$route.name == 'heavyBox') ? 'I' : '',//进出口 进口I,出口E
                something: val,//模糊查询参数
            }
            if (this.$route.name == 'emptyBox' || this.$route.name == 'heavyBox') {
                params.type = 'V'
            }
            this.$api.voyagesVslVoy(params).then(res => {
                this.shipNo = res.data
                if (this.form.id) {
                    this.voyId(this.form.voyId)
                }
            }).catch()
        },
        setFile() {
            this.dataList = {
                INTERNALFG_IM: [],
                sell: [],
                customer: [],
                consignor: [],
                cstTrnscomCd: [],
                workZone: [],
            }
            this.$api.term().then(res => {
                this.termList = res.data.data
            })
            this.$api
                .refCode({
                    domain: 'SETTLEMODE',
                })
                .then((res) => {
                    this.dataList.SETTLEMODE = res.data.data
                    this.$forceUpdate()
                })
                .catch()
            this.$api
                .customerByType({
                    tenantTypeName: '货主',
                })
                .then((res) => {
                    this.dataList.consignor = res.data.data
                    this.$forceUpdate()
                })
                .catch()
            this.$api
                .customerByType({
                    tenantTypeName: '运输公司',
                })
                .then((res) => {
                    this.dataList.cstTrnscomCd = res.data.data
                    this.$forceUpdate()
                })
                .catch()
            this.$api
                .customer()
                .then((res) => {
                    this.dataList.cstCoperListtomer = res.data.data
                    this.$forceUpdate()
                })
                .catch()
            let params = {
                termCode: '',//码头编码
                schedulesType: (this.$route.name == 'emptyBox' || this.$route.name == 'heavyBox') ? 'CONTAINER' : '',//件散货BULK_CARGO，集装箱CONTAINER

                iefg: (this.$route.name == 'emptyBox' || this.$route.name == 'heavyBox') ? 'I' : '',//进出口 进口I,出口E
                something: '',//模糊查询参数
            }
            if (this.$route.name == 'emptyBox' || this.$route.name == 'heavyBox') {
                params.type = 'V'
            }
            this.$api.voyagesVslVoy(params).then(res => {
                this.shipNo = res.data
                if (this.form.id) {
                    this.voyId(this.form.voyId)
                }
            }).catch()

            this.$api
                .refCode({
                    domain: 'INTERNALFG_IM',
                })
                .then((res) => {
                    this.dataList.INTERNALFG_IM = res.data.data
                    this.$forceUpdate()
                })
                .catch()
            let info = localStorage.getItem('userInfo')
            if (undefined !== info && !this.form.cstCstmcd) {
                this.form.cstCstmcd = JSON.parse(info).customerCode
                this.form.createUser = JSON.parse(info).name
            }
        },
    },

    computed: {},
    created() {
        this.setFile()
    },
    mounted() {
        this.oriForm = JSON.parse(JSON.stringify(this.form))
    },
}
</script>
<style lang='less' scoped>
.title {
  height: 50px;
  background: #0f47b8;
  color: #fff;
  font-size: 16px;
  padding-left: 30px;
  display: flex;
  align-items: center;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}

/deep/ .el-form-item__label {
  //text-align: left;
  padding-left: 10px;
}

/deep/ .el-upload--picture-card {
  width: 80px;
  height: 80px;
  line-height: 80px;
}

.btn {
  text-align: right;

  .add {
    margin-left: 10px;
    background: #0f47b8;
    height: 30px;
    padding: 5px 10px;
  }
}

.content {
  padding: 20px;
  box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.25);
  border-radius: 5px;
  border: 1px solid #d7d7d7;
  border-top: none;
}

.line {
  border-bottom: 1px solid #d7d7d7;
  margin-bottom: 20px;
}
</style>